<template>
  <div class="pie-echart">
    <base-echart :options="option" />
  </div>
</template>

<script setup>
import { computed, defineProps } from "vue";
import BaseEchart from "@/base-ui/echart";

const props = defineProps({
  roseData: Array,
});

const option = computed(() => {
  return {
    legend: {
      top: "",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    series: [
      {
        name: "分类商品数量",
        type: "pie",
        radius: [20, 130],
        center: ["50%", "55%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        data: props.roseData,
        label: {
          alignTo: "edge",
          minMargin: 5,
          edgeDistance: 15,
          lineHeight: 15,
          width: 40,
        },
      },
    ],
  };
});
</script>

<style lang="less" scoped></style>
